<template>
  <div class="edit-form">
    <FormBasicEquipment :submitHandle="submitHandle" :data-model="deviceBasic.totalForm" >
      <div class="checked-device">
      <div class="checked-device-title"><span>关联指定设备</span></div>
      <h-table-list
        border
        type="local"
        :data="tableData"
        :showPagination="false"
        :columns="columns"
      >
        <!-- <ListOpearteButton /> -->
        <el-button @click="addCheckedDevice">添加设备</el-button>
        <template slot="operate-column" slot-scope="scope">
         <el-button @click="()=>removeItem(scope.$index)">删除</el-button>
        </template>
      </h-table-list>
    </div>
    </FormBasicEquipment>
    <DownloadIdentify
      @cancel="cancel" 
      @update="addChooseDevices"
      :visible.sync="dialogDeviceVisible"
     
      title="添加设备"
    >
      <h-table-list
        border
        type="local"
        :data="deviceBasic.records"
        :page-sizes="[10, 20]"
        :columns="column3s"
        :form-options="formOptions2s"
        ref="addCheckDeviceTable"
         :paginationInfo="paginationInfo"
        @selection-change="handleSelectionChange"
      >
        <template slot="preview-column" slot-scope="scope">
          <p>{{ scope.row.status }}</p>
        </template>
        <template slot="operate-column" slot-scope="scope">
          <tableButton :row="scope.row" />
        </template>
      </h-table-list>
    </DownloadIdentify>
  </div>
</template>

<script>
import data from './const'
import DownloadIdentify from "@/components/FormDialog";
import FormBasicEquipment from './form1.vue'
import {
        mapState,
        mapMutations
    } from "vuex"
export default {
  name: 'EditBasicEquipment',
  components: { FormBasicEquipment ,DownloadIdentify},

  data() {
    //组装扩展信息

    return {

      data,
      submitHandle:(params,stateObj)=>{
        this.submitForm(params,stateObj)
      },
 formOptions2s: {
        inline: true,
        submitBtnText: "查询",
        forms: [
          { prop: "mobile", label: "设备名称" },
          { prop: "mobile", label: "设备编号" },
          {
            prop: "sex",
            label: "设备类别",
            itemType: "select",
            options: [
              { value:1, label: "部门1" },
              { value: 2, label: "部门2" },
              { value: 3, label: "部门3" },
            ],
          },
        ],
      },
      dialogDeviceVisible: false,
      dialogPartVisible: false,
      tableData: [],
      tableData2s: [
        { id: 0, checkContent: "22" },
        { id: 1, checkContent: "22" },
        { id: 2, checkContent: "22" },
      ],
      tableData3s: [],
      data,
      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
         
          this.$store.dispatch("deviceBasic/setListSearchParams", {
            current: e,
          });
          this.getDeviceList(
            Object.assign({}, this.$store.state.deviceBasic.listSearchParams)
          );
        },
        current: 1,
        total: 10 ,
      },
       columns: [
        { type: "index", label: "序号", width: 140 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "assetNumber",
          label: "设备编号",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "organName", label: "使用部门", minWidth: 180 },
        { prop: "deviceClass", label: "设备分类", minWidth: 180 },
        {
          prop: "operate",
          label: "操作",
          minWidth: 180,
          slotName: "operate-column",
          fixed: "right",
        },
      ],
      column3s: [
        {  type: "selection", width: 140 },
        { type: "index", label: "序号", width: 140 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "assetNumber",
          label: "设备编号",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "organName", label: "使用部门", minWidth: 180 },
        { prop: "deviceClass", label: "设备类别", minWidth: 180 },
        { prop: "typeName", label: "设备分类", minWidth: 180 },
        //{ prop: "departmentName", label: "责任人", minWidth: 180 },
      ],
    }
  },
  created(){
    this.$store.dispatch("deviceBasic/setTotalForm",data.totalForm)
   
  },
  mounted(){
    //判断是编辑还是新增
      this.preloadData()
    
  },
 computed: {
    ...mapState(["deviceBasic","app","supply"]),
  },
  methods:{
    removeItem(index){
      //
      const tableData=this.tableData
      tableData.splice(index,1)
       this.tableData=tableData
    },
   async preloadData(){
         const dataKey=this.$route.fullPath
      const id=localStorage.getItem(dataKey)
   
      if(id){
       await this.$store.dispatch("supply/requestDeviceDetailInfo",id)
 
       console.log(this.$store.state.supply,"编辑设备台账")
       //把详情对象分拆为模板格式
       this.data.totalForm[0].formModel=this.$store.state.supply.detailInfo
       this.data.totalForm[1].formModel=this.$store.state.supply.detailInfo
       this.tableData=this.$store.state.supply.detailInfo.assets
       this.data.totalForm[2].formModel.archives=this.$store.state.supply.detailInfo.productArchives
      this.$store
      .dispatch(this.$store_url_button, {
        add: this.add ||"",
        delete: this.delete||"",
        edit: this.edit||"",
        detail:this.detail||"",
        using:this.using||"",
        useless:this.useless||"",
        downloadIdentify:this.downloadIdentify ||""
      })
      .then(() => {
         this.getDeviceList()
      });
      }else{
          //先把常量信息给vuex
     
       this.$store
      .dispatch(this.$store_url_button, {
        add: this.add ||"",
        delete: this.delete||"",
        edit: this.edit||"",
        detail:this.detail||"",
        using:this.using||"",
        useless:this.useless||"",
        downloadIdentify:this.downloadIdentify ||""
      })
      .then(() => {
        this.getDeviceList() // 表格数据
      });
      }
     
    },
    addCheckedDevice() {
      console.log("添加点位设备");
      this.dialogDeviceVisible = true;
    },
    addCheckedItems() {
      console.log("添加点位项目");
      this.dialogPartVisible = true;
    },
    addCheckedNocontentItem() {
      //添加空白点检项
      //this.tableData2s.push({id:this.tableData2s.length})
      this.productRuleForm.tableData.push({
        date: "",
        name: "",
        phone: "",
        address: "",
      });
    },
    handleSelectionChange(row) {
      console.log("选择点检设备", row);
      this.chooseDevices=row
    },
    handleSelectionItemsChange(row) {
      console.log("选择点检项目", row);
      this.chooseItems = row;
    },
    addChooseDevices(row) {
      //console.log(this.chooseDevices);
      this.tableData=this.chooseDevices;
      // this.tableData=uniComplexArr(this.tableData)
      this.dialogDeviceVisible = false;
    },
    async getDeviceList(args){
      await this.$store.dispatch("deviceBasic/requestDeviceList",args);
      this.paginationInfo.total=this.$store.state.deviceBasic.total
    },
    submitForm(params,stateObj){
    console.log("---",params)
    const data=Object.assign({},params[0].formModel,params[1].formModel,params[2].formModel)
     data.assetIds=this.chooseDevices.map(e=>{return e.assetId})
     this.$store.dispatch("supply/saveDeviceInfo",data).then(response=>{

       if(stateObj.state==1){
         //保存
       this.$store.dispatch("tagsView/delVisitedView",{path:this.$route.fullPath})
       this.$router.push("/supply/index")
       }else{
         //保存入库
       //localStorage.setItem("instockId",1)
       this.$store.dispatch("tagsView/delVisitedView",{path:this.$route.fullPath})
       this.$router.push("/supply/index")
       }
    
     }
   
     )
      },
  }
}
</script>
<style lang="scss">
.edit-form{
    margin:10px;
    .edit-now-info{
        background: white;
    }
    .edit-form-history-info{
        background: white;
        margin:20px 0;
    }
}
</style>
